<template>
  <div id="equcla">
    <!-- 装备分类 -->
    <div>
      <h1
        style="
            font-weight: 700;
            font-style: normal;
            font-size: 24px;
            color: #344563;
        "
      >
        装备分类
      </h1>
      <el-button type="primary" round size="small" @click="addDialog=true" 
        >添加分类</el-button
      >
    </div>
    <!-- 数据 -->
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        lazy
        :tree-props="{ children: 'equipName', hasChildren: 'hasChildren' }"
      >
        <el-table-column
          prop="equipmentClassificationName"
          label="装备分类"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="num" label="装备数" align="center">
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
          <el-button type="warning" plain size="mini"
            ><i class="el-icon-plus" style="font-size: 15px"></i
          ></el-button>
          <el-button type="primary" plain size="mini" @click="openEdit(scope.row)"
            ><i class="el-icon-edit-outline" style="font-size: 15px"></i
          ></el-button>
          <el-button type="danger" plain size="mini" @click="openDel(scope.row.id)"
            ><i class="el-icon-delete" style="font-size: 15px"></i
          ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页码 -->
    <div class="pagination">
      <div style="display: flex; align-items: center">
        <span style="font-size: 13px; font-weight: bold"
          >共{{ Math.ceil(total / limit) }}页/{{ total }}条数据</span
        >
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="limit"
            layout="prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 添加 -->
    <el-dialog title="新增分类" :visible.sync="addDialog">
      <el-form :model="formAdd">
    <el-form-item label="分类名称">
      <el-input v-model="formAdd.equipmentclassification" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="add" >确 定</el-button>
  </div>
</el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑分类" :visible.sync="editDialog" class="bjk">
      <el-form :model="formEdit">
        <el-form-item label="分类名称" >
          <el-input
            v-model="formEdit.equipmentClassName"
            autocomplete="off"
            placeholder="请输入分类名称"
            :value="formEdit.editId"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog title="删除确认" :visible.sync="delDialog" class="bjk">
      <el-form> 删除该条客户信息后将不可恢复，确认删除？ </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="delDialog = false">取 消</el-button>
        <el-button type="primary" @click="del">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formEdit: {
       equipmentClassName: "",
       editId:null
      },
      formAdd: {
      equipmentclassification: '',
        },
      tableData: [
        // {
        //   id:'',
        //   equipmentClassificationName:'',
        //   num:'',
        //   hasChildren:true
        // }
      ],
      addDialog:false,
      editDialog: false,
      delDialog: false,
      delId:null,
      listData:[],
      page: 1,
      limit: 5,
      total: 0,
    };
  },
  methods: {
    getData:function(){
      this.$axios({
        url:'/equipmentclassification/list',
        method:'get',
        params:{
          limit: this.limit,
          page: this.page,
        },
      }).then(({data})=>{
          this.tableData = data.data;
          this.total = data.total;
        for(let i=0;i<data.data.length;i++){
          console.log(data.data[i].equipmentClassificationName);
              if(data.code==0){
          this.$axios({
        url:'/equipmentclassification/list/droplist',
        method:'post',
        data:{
          equipmentClassificationName:data.data[i].equipmentClassificationName,
        }
      }).then((data1)=>{
        let jo={
          
        }
        this.listData=data.data1;
        this.total=data1.total
      })
        }
        }
        
      
      })
    },
    openEdit:function(row){
     this.editDialog=true;
      this.formEdit.equipmentClassName=row.name
      this.formEdit.editId = row.id;
    },
    openDel:function(row){
      this.delDialog=true;
      this.delId=row
    },
    add:function(){
      this.$axios({
        url:'/equipmentclassification/add',
        method:'post',
        data:{
          equipmentClassName:this.formAdd.equipmentclassification,
        },
      }).then(({data})=>{
        if(data.code==0){
            this.$message.success('添加成功')
            this.addDialog = false;
            this.getData();
       }else{
        this.$message.error('添加失败')
       }
            
       
      })
    },
    edit:function(){
      this.$axios({
        url:'/equipmentclassification/update',
        method:'put',
        data:{
          equipmentClassName:this.formEdit.equipmentClassificationName,
          id:this.formEdit.editId
        }
      }).then(({data})=>{
        if(data.code==0){
          this.$message.success('编辑成功')
          this.editDialog = false;
          this.getData();
        }else{
          this.$message.error('编辑错误')
        }
    })
    },
    del:function(){
      this.$axios({
        url:'/equipmentclassification/delete',
        method:'delete',
        params:{
          id:this.delId,
        }
      }).then(({data})=>{
        if(data.code=='success'){
          console.log(1)
          this.$message.success('删除成功'),
          this.delDialog = false;
          this.getData();
        }else{
          this.$message.error('删除失败')
        }
      })
    },
     //分页
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
  },
   mounted: function () {
    this.getData();

  },
};
</script>

<style scoped lang="less">
#equcla {
  padding: 30px;
}
#equcla > div {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.bjk {
  width: 800px;
  height: 350px;
  position: absolute;
  left: calc(50% - 200px);
}
.pagination {
  position: absolute;
  display: flex;
  margin-top: 50px;
  right: 30px;
  // justify-content: right;
  margin-right: 20px;
}
</style>